<!doctype html>
<html lang="zh">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>预制菜溯源系统</title>
    <link rel="stylesheet" href="../static/css/style.css">
    <style>
        body {
            font-family: 宋体;
        }
        .pagination-line {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px;
            font-size: 13px;
            background: #fff;
        }

        .page-box {
            display: inline-flex;
            align-items: center;
            border: 1px solid #ddd;
            border-radius: 2px;
            overflow: hidden;
        }

        .page-btn, .page-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 28px;
            height: 28px;
            border: none;
            border-right: 1px solid #ddd;
            background: #fff;
            color: #666;
            text-decoration: none;
            cursor: pointer;
            margin: 0;
        }

        .page-btn:last-child, .page-number:last-child {
            border-right: none;
        }

        .page-btn:hover, .page-number:hover {
            background: #f5f5f5;
        }

        .page-numbers {
            display: inline-flex;
            align-items: center;
        }

        .page-number.active {
            background: #009688;
            color: #fff;
        }

        .page-size {
            height: 28px;
            border: 1px solid #ddd;
            border-radius: 2px;
            padding: 0 5px;
        }

        .jump-wrapper {
            display: inline-flex;
            align-items: center;
        }

        .jump-wrapper input {
            width: 50px;
            height: 28px;
            margin: 0 5px;
            padding: 0 5px;
            border: 1px solid #ddd;
            border-radius: 2px;
        }

        .page-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 28px;
            height: 28px;
            border: none;
            border-right: 1px solid #ddd;
            background: #fff;
            color: #666;
            text-decoration: none;
            cursor: pointer;
            margin: 0;
        }

        .page-number:last-child {
            border-right: none;
        }

        .page-number:hover {
            background: #f5f5f5;
        }

        .page-number.active {
            background: #009688;
            color: #fff;
        }

        .disabled {
            color: #ccc !important;
            cursor: not-allowed !important;
            pointer-events: none;
        }
    </style>
</head>
  <body>
<div id="loading"><div id="loading-center"></div></div>
      <div class="wrapper">
         <div class="iq-sidebar">
            <div class="iq-sidebar-logo d-flex justify-content-between">
               <a href="{{url_for('index')}}">
               <img src="../static/images/logo.png" class="img-fluid" alt="">
               <span>预制菜溯源系统</span>
               </a>
            </div>
            <div id="sidebar-scrollbar">
               <nav class="iq-sidebar-menu">
                  <ul class="iq-menu">

                     <li>
                        <a href="{{url_for('index')}}" class="iq-waves-effect"><i class="ri-home-4-fill"></i><span>首页</span></a>
                     </li>
                     <li>
                        <a href="{{url_for('trace_select')}}" class="iq-waves-effect"><i class="ri-search-2-line"></i><span>溯源查询</span></a>
                     </li>
                     <li>
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-shield-user-fill"></i><span>个人中心 </span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                              <li><a href="{{url_for('change_form')}}">资料编辑</a></li>
                              <li><a href="{{url_for('change_passwd')}}">修改密码</a></li>
                        </ul>
                     </li>

                     {% if user and user.role == 'admin' %}
                     <li class="menu-open active">
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-user-settings-fill"></i>用户管理</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                              <li class="active"><a href="{{url_for('my_user')}}">我的用户</a></li>
                              <li><a href="{{url_for('add_user')}}">添加用户</a></li>
                        </ul>
                     </li>
                     {% endif %}

                     {% if user and (user.role == 'admin' or user.role == 'transporter') %}
                     <li>
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-todo-fill"></i>运输管理</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                              <li><a href="{{url_for('transport_test')}}">运输信息管理</a></li>
                              <li><a href="{{url_for('transport_show')}}">运输路线管理</a></li>
                        </ul>
                     </li>
                     {% endif %}

                     {% if user and user.role == 'admin' %}
                     <li>
                        <a href="{{url_for('product_manage')}}" class="iq-waves-effect"><i class="ri-file-edit-fill"></i><span>合约管理</span></a>
                     </li>
                     {% endif %}

                     {% if user and (user.role == 'admin' or user.role == 'producer') %}
                     <li>
                        <a href="javascript:void(0);"><i class="ri-stack-fill"></i>产品信息录入</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                              <li><a href="{{url_for('raw_material')}}">原材料录入</a></li>
                              <li><a href="{{url_for('production_record')}}">生产记录创建</a></li>
                              <li><a href="{{url_for('product_generation')}}">产品生成</a></li>
                        </ul>
                     </li>
                     {% endif %}
                  </ul>
               </nav>
               <div class="p-3"></div>
            </div>
         </div>
         <!-- Page Content  -->
         <div id="content-page" class="content-page">
            <!-- TOP Nav Bar -->
         <div class="iq-top-navbar">
            <div class="iq-navbar-custom">

               <nav class="navbar navbar-expand-lg navbar-light p-0">
                  <div class="iq-search-bar">
                     <form action="#" class="searchbox">
                        <input type="text" class="text search-input" placeholder="请输入搜索内容...">
                        <a class="search-link" href="#"><i class="ri-search-line"></i></a>
                     </form>
                  </div>
                  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                  <i class="ri-menu-3-line"></i>
                  </button>
                  <div class="iq-menu-bt align-self-center">
                     <div class="wrapper-menu">
                        <div class="main-circle"><i class="ri-more-fill"></i></div>
                           <div class="hover-circle"><i class="ri-more-2-fill"></i></div>
                     </div>
                  </div>
                  <div class="collapse navbar-collapse" id="navbarSupportedContent">
                     <ul class="navbar-nav ml-auto navbar-list">

                        <li>
                           <a href="{{url_for('AI')}}">AI对话</a>
                        </li>

                        <li class="nav-item">
                           <a href="#" class="search-toggle iq-waves-effect">
                                 <i class="ri-notification-3-fill"></i>
                                 <span class="bg-danger dots"></span>
                              </a>
                           <div class="iq-sub-dropdown">
                              <div class="iq-card shadow-none m-0">
                                 <div class="iq-card-body p-0 ">
                                    <div class="bg-primary p-3">
                                       <h5 class="mb-0 text-white">所有通知<small class="badge  badge-light float-right pt-1">4</small></h5>
                                    </div>

                                    <a href="#" class="iq-sub-card" >
                                       <div class="media align-items-center">
                                          <div class="">
                                             <img class="avatar-40 rounded" src="../static/images/user/01.jpg" alt="">
                                          </div>
                                          <div class="media-body ml-3">
                                             <h6 class="mb-0 ">艾玛·沃森·比尼。</h6>
                                             <small class="float-right font-size-12">刚刚</small>
                                             <p class="mb-0">消息</p>
                                          </div>
                                       </div>
                                    </a>
                                    <a href="#" class="iq-sub-card" >
                                       <div class="media align-items-center">
                                          <div class="">
                                             <img class="avatar-40 rounded" src="../static/images/user/02.jpg" alt="">
                                          </div>
                                          <div class="media-body ml-3">
                                             <h6 class="mb-0 ">新客户加入</h6>
                                             <small class="float-right font-size-12">5天前</small>
                                             <p class="mb-0">系统管理员</p>
                                          </div>
                                       </div>
                                    </a>
                                 </div>
                              </div>
                           </div>
                        </li>
                     </ul>
                  </div>
                  <ul class="navbar-list">
                     <li>
                        <a href="#" class="search-toggle iq-waves-effect d-flex align-items-center">
                           <img src="..//static/images/user1.jpg" class="img-fluid rounded mr-3" alt="user">
                           <div class="caption">
                              {% if user %}
                                  <h6 class="mb-0 line-height">{{ user.username }}</h6>
                                  <span class="font-size-12">{{ user.role }}</span>
                              {% else %}
                                  <h6 class="mb-0 line-height">未登录</h6>
                                  <span class="font-size-12">游客</span>
                              {% endif %}
                           </div>
                        </a>
                        <div class="iq-sub-dropdown iq-user-dropdown">
                           <div class="iq-card shadow-none m-0">
                              <div class="iq-card-body p-0 ">
                                 <div class="bg-primary p-3">
                                    <h5 class="mb-0 text-white line-height">你好-{{ user.username }}</h5>
                                 </div>
                                 <a href="{{url_for('change_form')}}" class="iq-sub-card iq-bg-primary-hover">
                                    <div class="media align-items-center">
                                       <div class="rounded iq-card-icon iq-bg-primary">
                                          <i class="ri-file-user-line"></i>
                                       </div>
                                       <div class="media-body ml-3">
                                          <h6 class="mb-0 ">个人中心</h6>
                                       </div>
                                    </div>
                                 </a>
                                 <a href="{{url_for('change_passwd')}}" class="iq-sub-card iq-bg-primary-hover">
                                    <div class="media align-items-center">
                                       <div class="rounded iq-card-icon iq-bg-primary">
                                          <i class="ri-profile-line"></i>
                                       </div>
                                       <div class="media-body ml-3">
                                          <h6 class="mb-0 ">修改密码</h6>
                                       </div>
                                    </div>
                                 </a>


                                 <div class="d-inline-block w-100 text-center p-3">
                                    <a class="bg-primary iq-sign-btn" href="{{ url_for('logout') }}" role="button">退出登录<i class="ri-login-box-line ml-2"></i></a>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </li>
                  </ul>
               </nav>

            </div>
         </div>
         <!-- TOP Nav Bar END -->
         <div class="container-fluid">

            <div class="iq-card">
               <div class="iq-card-header d-flex justify-content-between">
                  <div class="iq-header-title">
                     <h4 class="card-title">我的用户</h4>
                  </div>
               </div>
               
               <div class="iq-card-body">
						<div class="topbtn">
						
							<a href="{{url_for('add_user')}}" class="btn btn-bg-gradient-x-purple-red">创建用户账号</a>
							<a href="javascript:;" class="btn btn-info upbtn"><input type="file">批量导入用户账号</a>
							<a href="javascript:;" class="btn btn-def ">下载模版</a>	
						</div>
						<div class="selbox">
							<form id="searchForm" onsubmit="return false;">
								<div class="form1">
									<ul class="row">
										<li class="col-xs-4">
											<span>手机号码：</span>
											<input type="text" class="form-control" id="contact_info" name="contact_info">
										</li>
										
										<li class="col-xs-4">
											<span>姓名：</span>
											<input type="text" class="form-control" id="username" name="username">
										</li>
										<li class="col-xs-4" style="padding-left: 10px">
											<a href="javascript:;" class="btn btn-primary" onclick="searchUsers()">查询</a>
											<a href="javascript:;" class="btn btn-default" onclick="resetSearch()">重置</a>
											<a class="btn" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">更多查询条件</a>
										</li>
									</ul>
								</div>
								
								<div class="collapse in" id="collapseExample" aria-expanded="true" style="">
									<div class="form1">
										<ul class="row">
											<li class="col-xs-4">
												<span>用户类型：</span>
												<select class="form-control" id="role" name="role">
													<option value="">请选择</option>
													<option value="admin">admin</option>
													<option value="producer">producer</option>
													<option value="transporter">transporter</option>
													<option value="consumer">consumer</option>
												</select>
											</li>
										</ul>
									</div>
								</div>
							</form>
						</div>
					  <div class="tablebox">
						<table class="table" align="center" style="text-align: center;">
							<thead>
						  <tr>										
							<th><input type="checkbox" class="allsel"></th>
							<th>ID</th>
							<th>手机号</th>
							<th>用户姓名</th>
							<th>用户类型</th>
                            <th>所在机构</th>
							<th>编辑信息</th>
						  </tr> 
						 </thead>
						  <tbody>
						  {% for user in users %}
						  <tr>
							<td><input type="checkbox" class="seli"></td>
							<td>{{ user.id }}</td>
							<td>{{ user.contact_info }}</td>
							<td>{{ user.username }}</td>
							<td>{{ user.role }}</td>
                            <td>{{ user.organization }}</td>
					        <td>
                                <button class="btn btn-primary" onclick="editUser('{{ user.username }}')">编辑</button>
                                <button class="btn btn-danger" onclick="deleteUser('{{ user.username }}')">删除</button>
                            </td>
						</tr>
						{% endfor %}
						</tbody>
					  </table>

						<div class="pagination-line">
						    <span class="records-info">共 <span id="totalRecords">0</span> 条记录 第 <span id="currentPage">1</span> / <span id="totalPages">1</span> 页</span>
						    <div class="page-box">
						        <a href="javascript:;" onclick="changePage('first')" class="page-btn"><<</a>
						        <a href="javascript:;" onclick="changePage('prev')" class="page-btn"><</a>
						        <span id="pageNumbers" class="page-numbers"></span>
						        <a href="javascript:;" onclick="changePage('next')" class="page-btn">></a>
						        <a href="javascript:;" onclick="changePage('last')" class="page-btn">>></a>
						    </div>
						    <select id="pageSize" class="page-size" onchange="changePageSize()">
						        <option value="10">10条每页</option>
						        <option value="20">20条每页</option>
						        <option value="30">30条每页</option>
						    </select>
						    <span class="jump-wrapper">
						        跳至 <input type="number" id="jumpPage" min="1" onkeypress="handleJumpKeyPress(event)"> 页
						    </span>
						</div>
						
					</div>

            </div>
                </div>
           
      <!-- 在表格后面添加编辑弹窗 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel">
   <div class="modal-dialog" role="document">
       <div class="modal-content">
           <div class="modal-header">
               <h4 class="modal-title" id="editModalLabel">编辑信息</h4>
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                   <span aria-hidden="true">&times;</span>
               </button>
           </div>
           <form method="POST" id="editForm">
               <div class="modal-body">
                   <div class="form-group">
                       <span>用户名：</span>
                       <input type="text" class="form-control" id="username" name="username" readonly>
                   </div>
                   <div class="form-group">
                       <span>密码：</span>
                       <input type="password" class="form-control" name="password" placeholder="不修改请留空">
                   </div>
                   <div class="form-group">
                       <span>手机号：</span>
                       <input type="text" class="form-control" name="contact_info">
                   </div>
                   <div class="form-group">
                       <span>所在机构：</span>
                       <input type="text" class="form-control" name="organization">
                   </div>
                   <div class="form-group">
                       <span>用户类型：</span>
                       <select class="form-control" name="role">
                           <option value="">请选择</option>
                           <option value="admin">admin</option>
                           <option value="producer">producer</option>
                           <option value="transporter">transporter</option>
                           <option value="consumer">consumer</option>
                       </select>
                   </div>
               </div>
               <div class="modal-footer">
                   <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                   <button type="submit" class="btn btn-primary">保存修改</button>
               </div>
           </form>
       </div>
   </div>
</div>

      

        
         </div>
            <!-- Footer -->
        <footer class="bg-white iq-footer">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-6">
                        <ul class="list-inline mb-0">
                            <li class="list-inline-item"><a href="#">使用帮助</a></li>
                            <li class="list-inline-item"><a href="#">进入官网</a></li>
                        </ul>
                    </div>
                    <div class="col-lg-6 text-right">
                        Copyright 2024 <a href="">预制菜溯源系统</a> 版权所有
                    </div>
                </div>
            </div>
        </footer>
         </div>
      </div>

      </body>

     <script src="../static/js/jquery.min.js"></script>
      <script src="../static/js/bootstrap.min.js"></script>
      <script src="../static/js/smooth-scrollbar.js"></script>
      <script src="../static/js/custom.js"></script>
      <script src="../static/js/laydate.js"></script>
		<script>
			lay('#version').html('-v'+ laydate.v);
			laydate.render({
				elem: '#date'
			  ,range: true
			  ,theme: '#2c9eae'
			});
      </script>
      <!-- 添加JavaScript代码 -->
      <script>
         function editUser(username) {
             $.get("/edit_user/" + username, function(data) {
                 $('#editModal').modal('show');
                 $('#username').val(data.username);
                 $('input[name="contact_info"]').val(data.contact_info);
                 $('input[name="organization"]').val(data.organization);
                 $('select[name="role"]').val(data.role);
                 $('#editForm').attr('action', "/edit_user/" + username);
             });
         }
     </script>
     <script>
        function deleteUser(username) {
            if(confirm('确定要删除用户 ' + username + ' 吗?')) {
                $.ajax({
                    url: "/delete_user/" + username,
                    type: "POST",
                    success: function(response) {
                        alert('删除成功!');
                        location.reload();
                    },
                    error: function(xhr) {
                        alert('删除失败: ' + xhr.responseJSON.error);
                    }
                });
            }
        }
    </script>
    <script>
        let currentPage = 1;
        let totalPages = 1;
        let pageSize = 10;

        function searchUsers(page = 1) {
            let contact_info = $('#contact_info').val();
            let username = $('#username').val();
            let role = $('#role').val();
            
            $.get('/search_users', {
                contact_info: contact_info,
                username: username,
                role: role,
                page: page,
                per_page: pageSize
            }, function(data) {
                // 更新分页信息
                currentPage = data.pagination.current_page;
                totalPages = data.pagination.total_pages;
                $('#totalRecords').text(data.pagination.total);
                $('#currentPage').text(currentPage);
                $('#totalPages').text(totalPages);
                
                // 更新页码
                updatePageNumbers();
                
                // 更新表格数据
                $('tbody').empty();
                data.users.forEach(function(user) {
                    let row = `<tr>
                        <td><input type="checkbox" class="seli"></td>
                        <td>${user.id}</td>
                        <td>${user.contact_info || ''}</td>
                        <td>${user.username}</td>
                        <td>${user.role}</td>
                        <td>${user.organization || ''}</td>
                        <td>
                            <button class="btn btn-primary" onclick="editUser('${user.username}')">编辑</button>
                            <button class="btn btn-danger" onclick="deleteUser('${user.username}')">删除</button>
                        </td>
                    </tr>`;
                    $('tbody').append(row);
                });
            });
        }

        function changePageSize() {
            pageSize = parseInt($('#pageSize').val());
            searchUsers(1);
        }

        function handleJumpKeyPress(event) {
            if (event.keyCode === 13) {  // Enter键
                let page = parseInt($('#jumpPage').val());
                if (page >= 1 && page <= totalPages) {
                    searchUsers(page);
                } else {
                    alert('请输入有效的页码!');
                }
                $('#jumpPage').val(''); // 清空输入框
            }
        }

        // 页面加载时执行初始搜索
        $(document).ready(function() {
            searchUsers();
        });
    </script>
    <script>
        function updatePageNumbers() {
            const $pageNumbers = $('#pageNumbers');
            $pageNumbers.empty();
            
            // 计算显示的页码范围
            let startPage = Math.max(1, currentPage - 2);
            let endPage = Math.min(totalPages, currentPage + 2);
            
            // 确保最多显示5个页码
            if (endPage - startPage < 4) {
                if (startPage === 1) {
                    endPage = Math.min(5, totalPages);
                } else {
                    startPage = Math.max(1, endPage - 4);
                }
            }
            
            // 生成页码
            for (let i = startPage; i <= endPage; i++) {
                const $pageNumber = $(`<a href="javascript:;" 
                    class="page-number ${i === currentPage ? 'active' : ''}" 
                    onclick="changePage(${i})">${i}</a>`);
                $pageNumbers.append($pageNumber);
            }
            
            // 更新导航按钮状态
            $('.page-btn[onclick="changePage(\'first\')"]').toggleClass('disabled', currentPage === 1);
            $('.page-btn[onclick="changePage(\'prev\')"]').toggleClass('disabled', currentPage === 1);
            $('.page-btn[onclick="changePage(\'next\')"]').toggleClass('disabled', currentPage === totalPages);
            $('.page-btn[onclick="changePage(\'last\')"]').toggleClass('disabled', currentPage === totalPages);
        }

        function changePage(action) {
            let newPage = currentPage;
            
            if (typeof action === 'number') {
                newPage = action;
            } else {
                switch(action) {
                    case 'first':
                        newPage = 1;
                        break;
                    case 'last':
                        newPage = totalPages;
                        break;
                    case 'prev':
                        newPage = Math.max(1, currentPage - 1);
                        break;
                    case 'next':
                        newPage = Math.min(totalPages, currentPage + 1);
                        break;
                }
            }
            
            if (newPage !== currentPage && newPage >= 1 && newPage <= totalPages) {
                searchUsers(newPage);
            }
        }
    </script>
</html>
